<template>
  <div class='hxPage'>
    <div class='hxBg'>
      <image class='hxBg_img' :src="bgImg" mode="aspectFit"/>
    </div>
    <div class='hxLogo'>
      <image class='hxLogo_img' :src="logoImg" mode="aspectFit"/>
    </div>
    <div class='hxPage_con'>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "hxPage",
  data() {
    return {
      logoImg: require('../../static/img/logo.png'),
      bgImg: require('../../static/img/bg.jpg'),
    }
  }
}
</script>

<style scoped lang="scss">
.hxPage {
  width: 100%;
  height: 100%;
  background: #eeeeee no-repeat center bottom;
  background-size: 100% auto;

  .hxBg {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;

    &_img {
      width: 100%;
    }
  }

  .hxLogo {
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: center;

    &_img {
      width: 70%;
    }
  }

  &_con {
    height: 80%;
    position: relative;
  }
}
</style>
